<template>
  <div id="app">
     <el-row type="flex" class="row-bg" justify="center">
      
    <el-col :span="6" :lg="7" :xl="6">
      <h1>欢迎来到东大星问卷系统 </h1>
      <el-image
        :src="require('@/assets/images/logo.png')"
        style="width: 175px; height: 210px; margin: 0"
      ></el-image>
    </el-col>

    <el-col :span="1" >
      <el-divider direction="vertical"></el-divider>
    </el-col>

    <el-col :span = "6">
      <el-tabs 
      v-model="activeName" 
      @tab-click="handleClick" 
      :stretch="true" 
      style="margin-bottom: 10%">
        <el-tab-pane label="账号登录" name="first" ></el-tab-pane>
        <el-tab-pane label="手机登录" name="second"></el-tab-pane>
      </el-tabs>

      <el-form 
      :model="LoginForm" 
      :rules="rules" 
      ref="LoginForm" 
>
     <el-form 
       ref="getCodeForm" 
       :rules="getCoderules" 
       :model="getCodeForm">

       <el-form style="margin-bottom: 3%;">
        <router-link to="/Register" 
                  style="margin-left: 60%;">
                  <font size="3px">没有帐号？点我注册</font> 
                </router-link>
      </el-form>
        <el-form-item prop="phone">

          <el-input 
          v-model="LoginForm.phone" 
          style="width:90%  ;margin-left: 5%;float:left" placeholder="请输入手机号"
          ></el-input>            
        </el-form-item>
      

        <el-form-item prop="code">
          <el-input 
          v-model="LoginForm.code" class="code" 
          style="width:58% ;margin-left: 5%;float:left" placeholder="请输入验证码"
          ></el-input>
          <el-button type="primary"  v-show="show" @click="getCode('getCodeForm')" style="margin-left: -5%">获取验证码</el-button>
        <el-button type="primary"   v-show="!show" disabled style=" width:32%;margin-left: -5%"> {{count}} s</el-button>
      </el-form-item>
      </el-form>

        <el-form-item>

          <el-button
          type="primary"
          @click="submitForm('LoginForm')" 
          style="width:90% ;margin-left:5%;float:left"
          >登录</el-button>
          <router-link to="/PasswordFind" 
                  style="margin-left: 5%;visibility:hidden"
                  >
                  <font size="3px">已有帐号，忘记密码？</font> 
                  </router-link>
          <!-- <router-link to="/Register">
            <el-button >注册</el-button>
            </router-link> -->
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  </div>
 
</template>

<script>
export default {
  name: "LoginPhone",
  data() {
    return {
      LoginForm: {
        phone: '',
        code :''
      },

     
      getCodeForm:{
          phone: '',
      },

      getCoderules:{
         phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为 11 位数字', trigger: 'blur' }
        ],
      },
      
        show: true,    
        timer: null,
        count: '',
      
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 11, message: '长度为 11 位数字', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { min: 5, max: 5, message: '长度为 5 个字符', trigger: 'blur' }
        ]
      },
      activeName:'second',
    };
  },
  methods: {
    // 提交登录表单
    submitForm(formName) {

       this.$refs[formName].validate(async (valid) => {
        if (!valid) {
          return;
        } 

      await this.$http({
        method: "post",
          url: "/telLogin",
          data: {
            tel:this.LoginForm.phone,
            code:this.LoginForm.code,
          }
      }).then((response) => {
          //访问后端


          const res= response.data
          if (res.code == "666") {
            //访问成功
          this.$message.success(response.message);


              window.sessionStorage.setItem("name", res.data.name);
              window.sessionStorage.setItem("level", res.data.level);
          this.$router.push('/home');
          } else {
          this.$message.error(response.message);
          }
        })
        .catch((error) => {
          // 【务必注意】这里的error输出的不是一个对象【error.response才是一个对象】
          // console.log(error);
          if (error.response) {
            // 请求已发出，但服务器响应的状态码不在 2xx 范围内
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
          } else {
            // Something happened in setting up the request that triggered an Error
            console.log("请求未发出", error.message);
          }
        }); 
      });
    },

    handleClick(tab, event) {
      if(this.activeName=="first"){
        this.$router.push('/');
      }else {
        this.$router.push('/Login-Phone');
      }

    },
  
// 获取验证码函数
     async getCode(formName) {     
      this.getCodeForm.phone=this.LoginForm.phone
       this.$refs[formName].validate(async (valid) => {

        if (!valid) {
          return
        }  
        this.getCodeSecond()
        await this.$http({
        method: "get",
        url: "/getCode",
      
        params: {tel:this.LoginForm.phone},
    
      }).then((response) => {

          const res = response.data;
          if(res.code=="666"){
          this.$message.success(res.message)
          }
          else{
            this.$message.error(res.message)

          }
      });
      })},

      getCodeSecond(){ 
            this.show = false;
            const TIME_COUNT = 60;      
            if (!this.timer) {        
                this.count = TIME_COUNT;        
                this.show = false;        
                this.timer = setInterval(() => {        
                    if (this.count > 0 && this.count <= TIME_COUNT) {          
                        this.count--;         
                    } else {          
                        this.show = true;          
                        clearInterval(this.timer);          
                        this.timer = null;         
                    }        
                }, 1000)       
            }    
        } 
  }

}
</script>

<style scoped>

.el-row {
  height: 100vh;
  display: flex;
  align-items: center;
}
.el-divider {
  height: 200px;
}
#app {
  background-image: url("@/assets/images/background.jpg");
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;

  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin: 0;
}
  .button{
    width:320px;
    height: 40px;
    margin-left: -95px;
    text-align: center;
  }


</style>